<template>
  <dv-border-box-4 :reverse="true" class="left-chart-2" :color="['#00CCFF','#00CCFF']">
    <div class="left-box-container" v-if="chartVisiable">
      <dv-capsule-chart class="capsule-cls" :config="options.capsule" />
      <dv-decoration-9 class="process-cls" :color="['#00CCFF','#00CCFF']">{{options.process}}</dv-decoration-9>
    </div>
  </dv-border-box-4>
</template>

<script>


export default {
  name: 'census_chart',
  props:{
    mdata:{
      require:true,
      type:Object
    }
  },
  data () {
    return {
      chartVisiable:false,
      options:{capsule:null,process:null}
    }
  },
  mounted() {
    this.initChart();
  },
  methods:{
    initChart:function () {
      this.options.capsule=this.mdata.census
      this.options.process = this.mdata.process
      this.chartVisiable=true;
    }
  }
}
</script>

<style lang="scss" scoped>
.left-chart-2 {
  width: 100%;
  height: 33%;
  padding: 20px 10px;

  .left-box-container{
    width: 100%;
    height: 100%;
    padding: 0 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;

    .capsule-cls{
      width: calc(100% - 160px);
      height:60%;
    }
    .process-cls{
      width: 150px;
      height: 150px;
    }
  }
}
</style>
